<template>
	<view class="bj-box left clearfix">
		<view class="bj-title left">
			视频模板
		</view>
		<!--选项卡开始-->
		<view class="bj-label left clearfix">
			<view class="tim-type-item left" @click="templateType = 1" :style="templateType==1?'background:#fff;border-radius:7px;box-shadow: 0 0 4px 0 rgba(0, 0, 0, .15);color:#333;font-weight:500;':'background:none;border-radius:0;box-shadow: none;'">
				智能匹配
			</view>
			
			<view class="tim-type-item left" @click="selectedTemplate()" :style="templateType==2?'background:#fff;border-radius:7px;box-shadow: 0 0 4px 0 rgba(0, 0, 0, .15);color:#333;font-weight:500;':'background:none;border-radius:0;box-shadow: none;'">
				手动选择
			</view>
			
		</view>
		
		
		<!--模版弹窗-->
		<uni-popup type="center" ref="templatePopup">
			
			<view class="temp-box left clearfix">
				<view class="timbre-title-box left clearfix">
					<view class="timbre-title-text left">
						选择模板
					</view>
					<view class="timbre-title-close right" @click="closePopup()">
						<uni-icons type="closeempty" size="20" color="#999"></uni-icons>
					</view>
				</view>
				
				
				<!--内容开始-->
				<view class="temp-content left clearfix">
					
				</view>
				<!--内容结束-->
				
			</view>
			
		</uni-popup>
		
	</view>
</template>

<style scoped>
	.temp-content{width:96%;height:500px;border:1px solid red;margin-left:2%;margin-top:20px;}
	.timbre-title-close{width:30px;height:50px;line-height:50px;margin-right:5px;cursor:pointer;}
	.timbre-title-text{line-height:50px;margin-left:20px;font-size:14px;}
	.timbre-title-box{width:100%;height:50px;border-bottom:1px solid #eee;}
	.temp-box{width:1000px;height:600px;background:#fff;border-radius: 12px;}
	.tim-type-item{width:calc(50% - 5px);height:35px;line-height:35px;margin:5px;margin-top:2.5px;margin-left:2.5px;margin-right:2.5px;cursor: pointer;position: relative;text-align: center;transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);font-size:13px;color:#666;}
	.bj-label{width:calc(100% - 40px);margin-left:20px;background-color: rgba(0, 0, 0, 0.04);height:40px;margin-top:20px;border-radius: 7px;}
	.bj-title{width:calc(100% - 40px);padding-left:20px;font-size:14px;}
	.bj-box{width:100%;min-height:100px;margin-top:30px;}
</style>

<script>
	export default {
		name:"video-template",
		data() {
			return {
				templateType:1,
			};
		},
		methods:{
			//关闭
			closePopup(){
				this.$refs.templatePopup.close();
			},
			//切换以后
			selectedTemplate(){
				this.$refs.templatePopup.open();
				this.templateType = 2;
			}
		}
	}
</script>
